가상 클래스를 사용한 드랍메뉴 만들기

✒️ 2025-05-16 13:01 내용 수정

• <ul>로 만든 요소들을 처음엔 보이지 않았다가 마우스를 올리거나 클릭 시 보이도록 설정할 수 있다.

<div id="box">
	<ul id="menu">
		<li><a href="#">파일</a>
			<ul class="depth1">
				<li><a href="#">열기</a></li>
				<li><a href="#">불러오기</a></li>
				<li><a href="#">저장하기</a></li>
				<li><a href="#">나가기</a></li>
			</ul>
		</li>
		<li><a href="#">편집</a>
			<ul class="depth2">
				<li><a href="#">복사</a></li>
				<li><a href="#">붙여넣기</a></li>
				<li><a href="#">잘라내기</a></li>
			</ul>
		</li>
		<li><a href="#">검색</a></li>
		<li><a href="#">도움말</a></li>
	</ul>
</div>

• 문서 전체에 공용으로 사용할 기본 설정을 작성한다.

@charset "UTF-8";

*{margin:0; padding:0;}
a{text-decoration: none;}
li{list-style: none;}
table{border-collapse: collapse;}

• 가상 클래스를 사용하여 마우스가 올라갔을 때 요소가 보이도록 하는 display: block 속성을 지정한다.

#box{
	margin-left:15px;
	margin-top:15px;
}
	 
ul{overflow:hidden;}

li{
	float:left;
	border-right: 1px solid blue;
	border-top: 1px solid blue;
	border-bottom: 1px solid blue;
}

li:nth-child(1) {border-left:1px solid blue;}

a {
	display:block;
	padding:2px 10px;
}
  
a:hover{
	background: skyblue;
	color:white;
}
  
#menu > li:nth-child(1):hover .depth1{display:block;}
#menu > li:nth-child(2):hover .depth2{display:block;}

#menu .depth1{
	display:none;
	position:absolute;
	left:15px;
}

#menu .depth1 a{
	display:block; padding:5px;
}

#menu .depth2{
	display:none;
	position:absolute;
	left:15px;
}

#menu .depth2 a{
	display:block; padding:5px;
}